<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="../taglibs.jsp" %>
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		 <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

		<title>购物车</title>

 		<!-- Google font -->
 		<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,700" rel="stylesheet">

 		<!-- Bootstrap -->
 		<link type="text/css" rel="stylesheet" href="${path}/static/front/home/css/bootstrap.min.css"/>

 		<!-- Slick -->
 		<link type="text/css" rel="stylesheet" href="${path}/static/front/home/css/slick.css"/>
 		<link type="text/css" rel="stylesheet" href="${path}/static/front/home/css/slick-theme.css"/>

 		<!-- nouislider -->
 		<link type="text/css" rel="stylesheet" href="${path}/static/front/home/css/nouislider.min.css"/>

 		<!-- Font Awesome Icon -->
 		<link rel="stylesheet" href="${path}/static/front/home/css/font-awesome.min.css">

 		<!-- Custom stlylesheet -->
 		<link type="text/css" rel="stylesheet" href="${path}/static/front/home/css/style.css"/>

		<link rel="stylesheet" type="text/css" href="${path}/static/front/css/reset.css">
		<link rel="stylesheet" type="text/css" href="${path}/static/front/css/main.css">
		
		<!-- 自建Css -->
		<link type="text/css" rel="stylesheet" href="${path}/static/front/home/css/my.css"/> 
		
		
		
		<script src="${path}/static/front/home/js/jquery.min.js"></script>
		<script src="${path}/static/front/home/js/bootstrap.min.js"></script>
		<script src="${path}/static/front/home/js/slick.min.js"></script>
		<script src="${path}/static/front/home/js/nouislider.min.js"></script>
		<script src="${path}/static/front/home/js/jquery.zoom.min.js"></script>
		<script src="${path}/static/front/home/js/main.js"></script>
		<script src="${path}/static/common/jquery-2.1.4.js"></script>
		<script src="${path}/static/common/layer/layer.js" ></script>
		<script src="${path}/static/common/mylayer.js"></script>
		
 	</head>
	<body>
		<!-- HEADER -->
		<header>
			<!-- TOP HEADER -->
			<div id="top-header">
				<div class="container">
					<ul class="header-links pull-left">
						<li><a href="#"><i class="fa fa-phone"></i> 电话号码</a></li>
						<li><a href="#"><i class="fa fa-envelope-o"></i> 1228999026@email.com</a></li>
						<li><a href="#"><i class="fa fa-map-marker"></i> 山东省青岛市黄岛区</a></li>
					</ul>
					<ul class="header-links pull-right">
						<li class = "ExitUser"><a href="#"><i class="fa fa-dollar"></i>${user.username }</a></li>
						<li class = "in_user"><a href="#"><i class="fa fa-user-o"></i> 个人中心</a></li>
					</ul>
					</ul>
				</div>
			</div>
			<!-- /TOP HEADER -->

			<!-- MAIN HEADER -->
			
			
			<div id="header">
				<!-- container -->
				<div class="container">
					<!-- row -->
					<div class="row">
						<!-- LOGO -->
						<div class="col-md-3">
							<div class="header-logo">
								<a href="${path}/home/home.shtml" class="logo">
									<img src="${path}/static/front/home/img/logo.png" alt="">
								</a>
							</div>
						</div>
						<!-- /LOGO -->

						<!-- SEARCH BAR -->
						<div class="col-md-6">
							<div class="header-search">
								<form action="${path}/selectStore/getSelectStorePage.shtml" method="get">
									<select class="input-select">
										<option value="0">商品名</option>
									</select>
									<input class="input" name = "name" placeholder="根据商品名搜索" >
									<button class="search-btn" id="selectStore">搜索商品</button>
								</form>
							</div>
						</div>
						<!-- /SEARCH BAR -->

						<!-- ACCOUNT -->
						<div class="col-md-3 clearfix">
							<div class="header-ctn">
								<!-- Wishlist -->
								<div>
									<a href="#">
										<i class="fa fa-heart-o"></i>
										<span>我喜欢的</span>
										<div class="qty">2</div>
									</a>
								</div>
								<!-- /Wishlist -->

								<!-- Cart -->
								<div class="dropdown">
									<a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true" id = "dropDown">
										<i class="fa fa-shopping-cart"></i>
										<span>购物车</span>
										<div class="qty"  id="cartCount"></div>
									</a>
									<div class="cart-dropdown">
										<div class="cart-list" >
											<div class="product-widget" id = "productWidget">
												<div>登录后可查看您的购物车概览</div>
											</div>
										</div>
										<div class="cart-btns">
											<a class = "login_cart" href="#">登录</a>
											<a class = "in_cart" href="#" >我的购物车 <i class="fa fa-arrow-circle-right"></i></a>
										</div>
									</div>
								</div>
								<!-- /Cart -->

								
							</div>
						</div>
						<!-- /ACCOUNT -->
					</div>
					<!-- row -->
				</div>
				<!-- container -->
			</div>
			<!-- /MAIN HEADER -->
		</header>
		<!-- /HEADER -->

	<!-- NAVIGATION -->
		<nav id="navigation" >
			<!-- container -->
			<div class="container" style = "margin:0 auto;">
				<!-- responsive-nav -->
				<div id="responsive-nav" >
					<!-- NAV -->
					<ul class="main-nav nav navbar-nav Category1" >
						<c:forEach items="${topCategoryList}" var="topCategory"> 
							<li style = "padding = 5px">
								<a id = "Category1A" >${topCategory.name}</a>
								<c:forEach items="${secondCategoryList}" var="secondCategory"> 
								<c:if test="${secondCategory.parentId==topCategory.id}">
									<ul class ="Category2">
										<li id = "Category2Li">
											<a id="Category2A" href="${path}/store/getStorePage.shtml?categoryId=${secondCategory.id}" >${secondCategory.name}</a>
										</li>
									</ul>
								</c:if>
							</c:forEach>
							</li>
						</c:forEach>
					</ul>
					<!-- /NAV -->
				</div>
				<!-- /responsive-nav -->
			</div>
			<!-- /container -->
		</nav>
		<!-- /NAVIGATION -->

	<form id="form" class="layui-form layui-form-pane" action="">
		<h3 class="common_title">确认收货地址</h3>
		<c:if test="${shippingList[0] == null}">
			<div class="common_list_con clearfix">
				<dl>
					<dt>您还没有收货地址，请添加！</dt>
					<dd><button style="margin-top:10px;" type="button" class="layui-btn layui-btn-warm" id="addAddress" >新添地址</button></dd>
				</dl>
			</div>
		</c:if>
			
		<div class="common_list_con clearfix">
			<c:forEach items="${shippingList}" var="shipping">
				<dl>
					<dt>寄送到：</dt>
					<dd>
						<input type="radio" name="shippingId" value="${shipping.id}">${shipping.receiverName}-${shipping.receiverPhone}-${shipping.receiverAddress}
					 <button type="button" onclick="updateAddress(this)" id="${shipping.id }" style = "width:150px;height:20px;background-color:#37ab40;color:#fff">编辑收货地1址</button>
					</dd>
				</dl>
				<hr>
			</c:forEach>
		
		</div>
		
		<h3 class="common_title">支付方式</h3>	
		<div class="common_list_con clearfix">
			<div class="pay_style_con clearfix">
				<input type="radio" name="paymentType" value="0" checked>
				<label class="cash">货到付款</label>
				<input type="radio" name="paymentType" value="1">
				<label class="weixin">微信支付</label>
				<input type="radio" name="paymentType" value="2">
				<label class="zhifubao"></label>
				<input type="radio" name="paymentType" value="3">
				<label class="bank">银行卡支付</label>
			</div>
		</div>
	
		<h3 class="common_title">商品列表</h3>
		
		<div class="common_list_con clearfix">
			<ul class="goods_list_th clearfix">
				<li class="col01">商品名称</li>
				<li class="col02">商品单位</li>
				<li class="col03">商品价格</li>
				<li class="col04">数量</li>
				<li class="col05">小计</li>		
			</ul>
			<c:forEach items="${cartList}" var="cart">
				<ul class="goods_list_td clearfix">
					<li class="col01" id = "cart${cart.product.id}">${cart.product.id}</li>			
					<li class="col02"><img src="${cart.product.mainImageFullUrl}"></li>
					<li class="col03">${cart.product.name}</li>
					<li class="col04">件</li>
					<li class="col05">${cart.product.price}元</li>
					<li class="col06">${cart.quantity}</li>
					<li class="col07 prices" value = "${cart.product.price*cart.quantity}">${cart.product.price*cart.quantity}元</li>	
				</ul>
			</c:forEach>
		
		</div>
	
		<h3 class="common_title">总金额结算</h3>
	
		<div class="common_list_con clearfix">
			<div class="settle_con">
				<div class="total_goods_count" >共<em id = "count">0</em>种商品，总金额<b id = "totalPrice">0元</b></div>
				<div class="transit">运费：<b>10元</b></div>
				<div class="total_pay">实付款：<b id= "relPrice">0元</b></div>
			</div>
		</div>
	
		<div class="order_submit clearfix">
			<a href="javascript:;" id="order_btn" onclick="submitForm()">提交订单</a>
		</div>	
	</form>

		<!-- SECTION -->
		<div class="section">
			<!-- container -->
			<div class="container">
				<!-- row -->
				<div class="row">
				</div>
				<!-- /row -->
			</div>
			<!-- /container -->
		</div>
		<!-- /SECTION -->
		
		<!-- FOOTER -->
		<footer id="footer">
			<!-- top footer -->
			<div class="section">
				<!-- container -->
				<div class="container">
					<!-- row -->
					<div class="row">
						<div class="col-md-3 col-xs-6">
							<div class="footer">
								<h3 class="footer-title">进入后台管理</h3>
								<a href="${path}/user/getLoginListPage.action""><i class="fa fa-envelope-o"></i>需要相应权限才可进入</a>
							</div>
						</div>

					</div>
					<!-- /row -->
				</div>
				<!-- /container -->
			</div>
			<!-- /top footer -->
		</footer>
		<!-- /FOOTER -->


	<!-- 分类下拉  -->
	<script>
		$(function() {
			//监听一级菜单移入
			$(".Category1>li").mouseenter(function() {
				var $Category2 = $(this).children(".Category2");
				$Category2.stop();
				$Category2.slideDown(300);
			});

			$(".Category1>li").mouseleave(function() {
				var $Category2 = $(this).children(".Category2");
				$Category2.stop();
				$Category2.slideUp(300);
			});

		});
	</script>
	
	<script type="text/javascript">
	$(function() {
		refreshTotalPrice();
	});
	
	function refreshTotalPrice() {
		// 当页面加载完了，计算选中商品的总价格
		var totalPrice = 0;
		var count = 0;
		$(".prices").each(function(){
			var price = $(this).val();
			totalPrice += price;
			count = parseInt(count) + parseInt("1");
		});
		console.log("count = " + count);
		$("#totalPrice").html(totalPrice+"元");
		$("#relPrice").html(totalPrice + 10 +"元")
		$("#count").html(count);
	}
	
	function updateAddress(e){
		　　var id = $(e).attr("id");
		　　console.log("id =" + id);
			layer.open({
				type : 2,
				tile : "修改地址",
				area : ["500px", "580px"],
				content : "${path}/userInfo/getUpdateAddress.shtml?id="+id+""
			});
		}
	
	function submitForm() {
		$.post(
			"${path}/order/insert.shtml",
			$("#form").serialize(),
			function(result) {
				console.log(result);
				if(result.success) {
					mylayer.successUrl(result.msg, "${path}/userOrder/getUserOrderPage.shtml");
				} else {
					mylayer.errorMsg(result.msg);
				}
			},
			"json"
		);
	}
	
	
	</script>
	<!-- 登录框 -->
	<div id="loginFrom" class="login_form fr" style="display: none">
		<div class="login_title clearfix">
			<h1>用户登录</h1>
			<a href="#">立即注册</a>
		</div>
		<div class="form_input">
			<form id="form1">
				<input type="text" name="username" class="name_input"
					placeholder="请输入用户名">
				<div class="user_error">输入错误</div>
				<input type="password" name="password" class="pass_input"
					placeholder="请输入密码">
				<div class="pwd_error">输入错误</div>
				<div class="more_input clearfix">
					<input type="checkbox" name=""> <label>记住用户名</label> <a
						href="#">忘记密码</a>
				</div>
			</form>
			<input type="button" name="" value="登录" class="input_submit"
				onclick="submitLogin()">
		</div>
	</div>
	<script type="text/javascript">
	
		$("#dropDown").on(
			"click",
			function(){
				var user = "${user}";
				var name = "${user.username}";
				if (user == "") {// 这个用户没有登录,弹出登录框
					mylayer.errorMsg("您尚未登录");
				} else {// 这个用户已经登录，将商品插入购物车表，成功后跳转到购物车界面
					$.post(
							"${path}/store/selectUserCart.shtml",
							 {
								"userId" : "${user.id}"
							  }, 
							  function(listUC) {
									console.log(listUC);
									var html = "<div class='product-widget' ><div class='product-img'><img src='"+listUC[0].product.mainImageFullUrl+"' alt=''></div><div class='product-body'><h3 class='product-name'><a href='${path}/product/product.shtml?id="+ listUC[0].product.id +"&categoryId="+ listUC[0].product.categoryId +"' >"+listUC[0].product.name+"</a></h3></br><h4 class='product-price'>共有："+listUC[0].quantity+" 件</h4><h4 class='product-price'>商品单价为：$"+listUC[0].product.price+ "</h4></div><button class='delete'><i class='fa fa-close'></i></button></div>"
									for(var i = 1; i < listUC.length; i++) {
										html += "<div class='product-widget' ><div class='product-img'><img src='"+listUC[i].product.mainImageFullUrl+"' alt=''></div><div class='product-body'><h3 class='product-name'><a href='${path}/product/product.shtml?id="+ listUC[i].product.id +"&categoryId="+ listUC[i].product.categoryId +"' >"+listUC[i].product.name+"</a></h3></br><h4 class='product-price'>共有："+listUC[i].quantity+" 件</h4><h4 class='product-price'>商品单价为：$"+listUC[i].product.price+ "</h4></div><button class='delete'><i class='fa fa-close'></i></button></div>"
									}
									$("#productWidget").html(html); // innerHtml
									$("#cartCount").html(i);
							  	},
							"json"
						);
				}
			}
		);
	
		$(".in_cart").on(
				"click",
				function() {
					// 加入购物车之前首先要判断有没有登录
					// 1、如果没有登录那首先要登录
					// 2、如果已经登录将商品插入购物车表，成功后跳转到购物车界面
					// User user = (User)sesstion.getAttribute("user");
					var user = "${user}";
					var userName = "${user.username}";
					if (user == "") {// 这个用户没有登录,弹出登录框
						layer.open({
							type : 1,
							title : "登录",
							offset : "50px",
							area : [ "370px", "420px" ],
							content : $("#loginFrom")
						});
					} else {// 这个用户已经登录，将商品插入购物车表，成功后跳转到购物车界面
						mylayer.successUrl(
								"正在进入"+userName+"的购物车",
								"${path}/cart/getCartListPage.shtml");
							}
					});
		
		$(".in_user").on(
				"click",
				function() {
					// 加入购物车之前首先要判断有没有登录
					// 1、如果没有登录那首先要登录
					// 2、如果已经登录将商品插入购物车表，成功后跳转到购物车界面
					// User user = (User)sesstion.getAttribute("user");
					var user = "${user}";
					var userName = "${user.username}";
					if (user == "") {// 这个用户没有登录,弹出登录框
						layer.open({
							type : 1,
							title : "登录",
							offset : "50px",
							area : [ "370px", "420px" ],
							content : $("#loginFrom")
						});
					} else {// 这个用户已经登录，将商品插入购物车表，成功后跳转到购物车界面
						mylayer.successUrl(
								"正在进入"+userName+"的个人中心",
								"${path}/userInfo/getUserInfoPage.shtml");
							}
					});
		
		$(".login_cart").on(
				"click",
				function() {
					// 加入购物车之前首先要判断有没有登录
					// 1、如果没有登录那首先要登录
					// 2、如果已经登录将商品插入购物车表，成功后跳转到购物车界面
					// User user = (User)sesstion.getAttribute("user");
					var user = "${user}";
					var userName = "${user.username}";
					if (user == "") {// 这个用户没有登录,弹出登录框
						layer.open({
							type : 1,
							title : "登录",
							offset : "50px",
							area : [ "370px", "420px" ],
							content : $("#loginFrom")
						});
					} else {// 这个用户已经登录，将商品插入购物车表，成功后跳转到购物车界面
						mylayer.successMsg("用户"+userName+"您已登录了");
					}
					});

		$(".insert_cart").on(
				"click",
				function() {
					// 加入购物车之前首先要判断有没有登录
					// 1、如果没有登录那首先要登录
					// 2、如果已经登录将商品插入购物车表，成功后跳转到购物车界面
					// User user = (User)sesstion.getAttribute("user");
					var user = "${user}";
				
						var productId = $(this).attr("id");
						console.log("productId = " + productId);
					
					if (user == "") {// 这个用户没有登录,弹出登录框
						layer.open({
							type : 1,
							title : "登录",
							offset : "50px",
							area : [ "370px", "420px" ],
							content : $("#loginFrom")
						});
					} else {// 这个用户已经登录，将商品插入购物车表，成功后跳转到购物车界面
						$.post(
								"${path}/cart/insert.shtml",
								{
								 "productId":productId, 
								},
								function(result) {
									if(result.success) {
										// 如果插入成功，跳转到购物车列表界面
										mylayer.successUrl(result.msg, "${path}/cart/getCartListPage.shtml");
									} else {
										mylayer.errorMsg(result.msg);
									}
								},
								"json"
							);
							
						}
					});
		
		$("#addAddress").on(
				"click",
				function(){
					layer.open({
		 				type : 2,
		 				tile : "新添地址",
		 				area : ["500px", "580px"],
		 				content : "${path}/userInfo/getAddAddress.shtml"
		 			});
			});
		
		$(".ExitUser").on(
				"click",
				function() {
					//退出当前用户
					var user = "${user}";
					var userName = "${user.username}";
					if (user == "") {// 这个用户没有登录,弹出登录框
						mylayer.successMsg("您尚未登录"	);
					} else {// 这个用户已经登录，将商品插入购物车表，成功后跳转到购物车界面
						 layer.confirm('确定退出该用户么？', function(index){
					          	$.post(
					          		"${path}/userInfo/ExitUser.shtml",
					          		function(result) {
					          			if(result.success) {
					          				mylayer.successMsg(result.msg);
					          				location.href = "${path}/home/home.shtml";
					          			} else {
					          				mylayer.errorMsg(result.msg);
					          			}
					          		},
					          		"json"
					          	);
					          });
					}
				});
		
		function submitLogin() {
			$.post(
				"${path}/user/login.action",
				$("#form1").serialize(),
				function(result) {
					console.log(result);
					if(result.success) {
						mylayer.successMsg(result.msg);
						//当你在iframe页面关闭自身时获得当前弹出框的index索引
						var index = parent.layer.getFrameIndex(window.name);
						// js一个方法，定时器，1000毫秒之后自动执行function里面的代码
						setTimeout(function() {
							 // 关闭弹出层
							 parent.layer.close(index); 
							 // 刷新父页面
							 window.parent.location.reload();
						}, 1000);
					} else {
						mylayer.errorMsg(result.msg);
					}
				},
				"json"
			);
		}
	</script>
	
	
	</body>
</html>
